<template>
  <view class="user-center">
    <view class="user-info">
      <view class="user-avatar">
        <u-avatar
          size="60"
          shape="square"
          src="/static/images/user-avatar.jpg"
        ></u-avatar>
      </view>
      <view class="user-info-text">
        <view class="user-name">
          <text>姓名：{{ userInfo.name }}</text>
        </view>
        <view class="user-phone">
          <text>电话：{{ userInfo.phone }}</text>
        </view>
      </view>
    </view>
    <view class="user-center-cell-group">
      <u-cell
        v-for="item in userCenterCellList"
        :key="item.title"
        :title="item.title"
        :icon="item.icon"
        :is-link="item.isLink"
      ></u-cell>
    </view>
    <view>
      <u-button
        type="error"
        @click="handleLogout"
      >
        退出登录
      </u-button>
    </view>
  </view>
</template>

<script>
  import { ERROR_MESSAGE, ERROR_TYPE } from "@/common/constants";
  import { showMessage } from "@/common/utils";
  import { ROUTE_PATHS } from "@/router/routes";
  export default {
    data() {
      return {
        /**
         * 用户信息
         * @type {Object}
         */
        userInfo: {},
        userCenterCellList: [
          {
            title: "账户管理",
            icon: "account",
            isLink: true,
          },
          {
            title: "预约管理",
            icon: "order",
            isLink: true,
          },
          {
            title: "我的设置",
            icon: "setting",
            isLink: true,
          },
          {
            title: "意见反馈",
            icon: "email",
            isLink: true,
          },
          {
            title: "关于我们",
            icon: "info-circle",
            isLink: true,
          },
        ],
      };
    },

    onLoad() {
      this.getUserInfo();
    },
    methods: {
      getUserInfo() {
        this.userInfo = this.$store.state.user.userInfo;
      },
      async handleLogout() {
        try {
          await this.$store.dispatch("user/logout");
          uni.reLaunch({
            url: ROUTE_PATHS.HOME,
          });
        } catch (error) {
          if (error.type === ERROR_TYPE.NETWORK) {
            return;
          }
          showMessage(error.msg || ERROR_MESSAGE.NETWORK_ERROR, false);
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  page {
    background-color: #f5f5f5;
  }

  .user-center {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: var(--margin-base);
    gap: var(--margin-large);
    box-sizing: border-box;

    .user-info {
      display: flex;
      flex-direction: row;
      align-items: center;
      box-sizing: border-box;
      margin: 0 var(--margin-base);
      gap: var(--margin-base);

      .user-name {
        font-size: var(--font-size-base);
        color: #333;
      }

      .user-phone {
        font-size: var(--font-size-small);
        color: #666;
      }
    }

    .user-center-cell-group {
      box-sizing: border-box;
      border-radius: 5px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
    }
  }
</style>
